<% include ../common/header.ejs %>
<div class="container container-body">
    <form class="form-horizontal" style="width: 600px;margin: auto;"
          action="<%= (action == 'add' ? '/my/app/save' : '/my/app/update') %>" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label col-sm-offset-2" style="text-align: left;">
                <% if(action == 'add') { %>
                创建服务
                <% } else if(action == 'edit') { %>
                编辑服务
                <% } %>
            </label>
        </div>
        <div class="form-group" style="display: none;">
            <label for="fd_serviceid" class="col-sm-2 control-label">服务编号</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" name="fd_serviceid" id="fd_serviceid" placeholder="服务编号"
                       value="<%= (action == 'edit' ? list[0].fd_serviceid : '') %>">
            </div>
        </div>
        <div class="form-group">
            <label for="fd_name" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="fd_name" id="fd_name" placeholder="服务名称"
                       value="<%= (action == 'edit' ? list[0].fd_name : '') %>">
            </div>
        </div>
        <div class="form-group">
            <label for="fd_description" class="col-sm-2 control-label">描述</label>

            <div class="col-sm-10">
                <textarea rows="5" class="form-control" name="fd_description" id="fd_description"
                          placeholder="服务描述(最大32个字符)"><%= (action == 'edit' ? list[0].fd_description : '') %></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="fd_remark" class="col-sm-2 control-label">备注</label>

            <div class="col-sm-10">
                <textarea rows="5" class="form-control" name="fd_remark" id="fd_remark"
                          placeholder="服务备注"><%= (action == 'edit' ? list[0].fd_remark : '') %></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
    </form>
</div>
<% include ../common/footer.ejs %>
<script type="text/javascript" src="/jquery-validation-1.15.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.form-horizontal').validate({
            errorElement: 'span',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                fd_name: {
                    required: true,
                    remote: {
                        type: "post",
                        url: "/my/app/checkname",
                        data: {
                            fd_name: function () {
                                return $("#fd_name").val();
                            },
                            fd_serviceid: function () {
                                return $("#fd_serviceid").val();
                            }
                        },
                        dataType: "json",
                        dataFilter: function (data, type) {
                            data = JSON.parse(data);
                            if (data.status == 0)
                                return true;
                            else
                                return false;
                        }
                    }
                },
                fd_description: {
                    maxlength: 32
                }
            },
            messages: {
                fd_name: {
                    required: "服务名称不能为空!",
                    remote: '服务名称已经存在!'
                },
                fd_description: {
                    maxlength: "请输入一个长度最多是32的字符串!"
                }
            },

            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },

            success: function (label) {
                label.closest('.form-group').removeClass('has-error');
                label.remove();
            },

            errorPlacement: function (error, element) {
                element.parent('div').append(error);
            },

            submitHandler: function (form) {
                form.submit();
            }
        });

        $('.form-horizontal input').keypress(function (e) {
            if (e.which == 13) {
                if ($('.form-horizontal').validate().form()) {
                    $('.form-horizontal').submit();
                }
                return false;
            }
        });
    });
</script>